<template>
  <div class="index-container flex-col-c-c h-70 ">
    <img class="w-40" src="@/assets/images/logob2.png" alt="">
    <div class="w-100 h-100 flex-row-c loading-box pos-fix top-0 left-0">
      <div class="loading"/>
      <div class="loading tr ml-10"/> 
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { getUrlKey } from '@/utils/util';
import { authUser } from '@/api/common'
import axios from "axios";
const router = useRouter();
const img = ref('');

watch(() => 
  router.currentRoute.value.params,
  (params) => {
    // meta.value = metaVal
    // img.value = params.code
  },{immediate: true,deep: true}
)

// let paramCode = getUrlKey('code');
// console.log('获取到的code', paramCode)
// if(paramCode) {
//   getAuth(paramCode)
// }

// async function getAuth(code) {
//   axios.get(`http://121.43.144.2:3333/testIndex?code=${code}`).then(res=>{
//     console.log('认证返回', res);
//   }).catch(err => {
//     console.log(err)
//   })
// }
</script>

<style lang="scss" scoped>
.index-container {
  // background-color: #cd4545;
}
.loading-box {

}
.loading {
  position: relative;
  width: 50px;
  perspective: 200px;
  &.tr {
    // transform: otateY(180deg);
    // -webkit-transform: otateY(180deg);
  }
}

.loading:before,
.loading:after {
  position: absolute;
  width: 20px;
  height: 20px;
  content: "";
  animation: jumping 0.5s infinite alternate;
  background: rgba(0, 0, 0, 0);
}

.loading:before {
  left: 0;
}

.loading:after {
  right: 0;
  animation-delay: 0.15s;
}

@keyframes jumping {
  0% {
    transform: scale(1) translateY(0px) rotateX(0deg);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(1.2) translateY(-25px) rotateX(45deg);
    background: $primary;
    box-shadow: 0 25px 40px #2e0101;
  }
}
</style>
